<template>
  <div class="app_explain">
    <affix :label="$t('configLazyLoad.channel.appTip1')">
      <div class="img_wrap img_wrap1">
        <img src="../../../../../assets/img/appSdkAccess.png" alt="">
      </div>
    </affix>
    <affix :label="$t('configLazyLoad.channel.appTip2')">
      <div class="img_wrap img_wrap2">
        <img src="../../../../../assets/img/appSdkWork.png" alt="">
      </div>
    </affix>
    <affix :label="$t('configLazyLoad.channel.appTip3')">
      <div class="img_wrap img_wrap2">
        <img src="../../../../../assets/img/appSdkSchedule.png" alt="">
      </div>
    </affix>
  </div>
</template>
<script>
  import Affix from '@/components/ui-modules/affix/Affix'
  export default {
    name: 'AppExplain',
    data () {
      return {}
    },
    components: {
      Affix
    },
    computed: {},
    methods: {},
    beforeMount () {
    }
  }
</script>

<style lang="stylus" scoped>
  .app_explain
    padding 20px 15px
    height: calc(100vh - 52px - 42px - 20px - 60px)
    overflow: auto
    .img_wrap
      margin-top 20px
      img
        width 100%
    .img_wrap1
      width 360px
    .img_wrap2
      width 768px
      margin 0 auto
</style>
